<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>会议记录页面</title>


    <!--STYLESHEET-->
    <!--=================================================-->

 <link href="{{ url_for('static', path='/css/bootstrap.min.css') }}" rel="stylesheet">


 <link href="{{ url_for('static', path='/css/nifty.min.css') }}" rel="stylesheet">



    <!--Nifty Premium Icon [ DEMONSTRATION ]-->

 <link href="{{ url_for('static', path='css/demo/nifty-demo-icons.min.css') }}" rel="stylesheet">


    <!--=================================================-->








    <!--Ion Icons [ OPTIONAL ]-->

    <link href="{{ url_for('static', path='plugins/ionicons/css/ionicons.min.css') }}" rel="stylesheet">


    <!--Animate.css [ OPTIONAL ]-->
       <link href="{{ url_for('static', path='plugins/animate-css/animate.min.css') }}" rel="stylesheet">



    <!--Switchery [ OPTIONAL ]-->
      <link href="{{ url_for('static', path='plugins/switchery/switchery.min.css') }}" rel="stylesheet">



    <!--bootstrap-table CSS-->
         <link href="{{ url_for('static', path='plugins/bootstrap-table/bootstrap-table.min.css') }}" rel="stylesheet">


    <style type="text/css">
        #content-container {
            padding-top: 0;
        }

        .nano>.nano-content {
            overflow-x: auto;
        }


        .vLine {
            border-left: solid 2px #eee;
            height: 25px;
            vertical-align: middle;
            display: inline-block;
            margin-right: 20px;
            box-shadow: 1px 1px 2px #888;
        }

        .toolbarbtn {
            margin-left: 20px;
        }

        .header-success {
            background-color: #03a9f4;
        }

        .header-success .modal-title,
        .header-success .close {
            color: white;
        }
        .myhidden{
            display: none;
        }
    </style>
</head>

<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->

<body>
    <div id="container">


        <div class="boxed">

            <!--CONTENT CONTAINER-->
            <!--===================================================-->
            <div id="content-container">



                <!--Page content-->
                <!--===================================================-->
                <div id="page-content">


                    <div class="fixed-fluid">

                        <div class="fluid">
                            <div class="well well-sm">


                                <div>
<!-- 全部按钮 -->
                                    <form class="form-inline" id="formSearch">

                                        <a href="#" class="btn btn-purple btn-rounded toolbarbtn"
                                          id="btnRecord" onclick="btnStart();return false;">开始录音</a>

                                        <!-- <div class="vLine"></div> -->

                                        <a href="#" class="btn btn-info  btn-rounded toolbarbtn"
                                         id="btnSave"   onclick="btnSave();return false;">保存文件</a>

                                        <button type="button" class="btn btn-info  btn-rounded toolbarbtn"
                                                 onclick="files_download()">导出文件</button>



                                        <!-- <div class="vLine"></div> -->


                                    </form>

                                    <!--===================================================-->

                                </div>

                            </div>

                            <div class="panel " style="min-height: 610px;">

                                <div class="panel-body">

                                    <div class="row myhidden">
                                        <div class="form-group">
                                            <label class="col-sm-1 control-label" for="demo-hor-inputemail">当前语句:</label>
                                            <div class="col-sm-11">
                                                <input type="text" placeholder="实时语音转写结果...." id="myText"
                                                    class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">

                                            <div class="form-group has-success has-feedback" style="margin-top: 15px;">
                                                <label for="demo-oi-sccinput"
                                                    class="control-label text-semibold">全部语音内容：</label>

                                                <textarea rows="30" class="form-control" placeholder="语音内容..." id="myTexts"></textarea>


                                            </div>

                                        </div>
                                    </div>







                                </div>



                            </div>
                        </div>
                    </div>

                </div>
                <!--===================================================-->
                <!--End page content-->

            </div>
            <!--===================================================-->
            <!--END CONTENT CONTAINER-->





        </div>




        <!-- SCROLL PAGE BUTTON -->
        <!--===================================================-->
        <button class="scroll-top btn">
            <i class="pci-chevron chevron-up"></i>
        </button>
        <!--===================================================-->
    </div>
    <!--===================================================-->
    <!-- END OF CONTAINER -->


    <!--Default   Modal-->
    <!--===================================================-->
    <div class="modal fade" id="where-modal" data-backdrop="static" role="dialog" tabindex="-1"
        aria-labelledby="demo-default-modal" aria-hidden="true">
        <div class="modal-dialog" style="width:800px;">
            <div class="modal-content">

                <!--Modal header-->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><i
                            class="pci-cross pci-circle"></i></button>
                    <h4 class="modal-title">查询条件</h4>
                </div>

                <!--Modal body-->
                <div class="modal-body">

                    <div class="well well-sm">


                        <div>

                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="whereField" class="control-label">字段:</label>
                                    <select class="form-control" id="whereField">


                                    </select>
                                </div>
                                <div class="vLine"></div>
                                <div class="form-group">
                                    <label for="demo-inline-inputmail" class="control-label">运算方式:</label>

                                    <select class="form-control" id="calWay">
                                        <option>--请选择--
                                        </option>
                                        <option value="=">等于
                                        </option>
                                        <option value=">">大于
                                        </option>
                                        <option value="=">小于
                                        </option>
                                        <option value=">=">大于等于
                                        </option>
                                        <option value="<=">小于等于
                                        </option>
                                        <option value="like">like
                                        </option>



                                    </select>

                                </div>

                                <div class="vLine"></div>
                                <div class="form-group">
                                    <label for="demo-inline-inputmail" class="control-label">值:</label>


                                    <input id="whereItemValue" list="browsers" class="form-control">
                                    <datalist id="browsers">
                                        <option value="Internet Explorer">
                                        <option value="Firefox">
                                        <option value="Chrome">
                                        <option value="Opera">
                                        <option value="hehe">
                                    </datalist>

                                </div>
                                <div class="vLine"></div>
                                <button class="btn btn-success btn-icon" onclick="addWhereItem();return false;"><i
                                        class="ion-plus-round icon-lg"></i></button>



                            </form>

                            <!--===================================================-->

                        </div>

                    </div>
                    <div class="well well-sm">
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-warning" onclick="mergeOrItem();">或</button>
                            <!-- <button class="btn btn-warning">Middle</button>
                        <button class="btn btn-warning">Right</button> -->
                        </div>

                    </div>




                    <table class="table table-striped" id="whereItemsTable">


                    </table>


                </div>
                <!-- modal body end -->


                <!--Modal footer-->
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                    <button data-dismiss="modal" class="btn btn-primary" onclick="setWhereValue();">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!--===================================================-->
    <!--End Default  Bootstrap Modal-->







    <!--JAVASCRIPT-->
    <!--=================================================-->




<script src="{{ url_for('static', path='/js/jquery-3.6.0.min.js') }}"></script>

<script src="{{ url_for('static', path='/js/bootstrap.min.js') }}"></script>

<!-- 文件下载 -->
<script src="${basepath}/jquery-3.3.1/jquery-3.3.1.js" type="text/javascript"></script>
<script src="${basepath}/downLoadFile.js" type="text/javascript" ></script>

    <script src="{{ url_for('static', path='js/nifty.min.js') }}"></script>


    <!--=================================================-->



    <!--Bootbox Modals [ OPTIONAL ]-->

    <script src="{{ url_for('static', path='plugins/bootbox/bootbox.min.js') }}"></script>

    <!--Custom script [ DEMONSTRATION ]-->
    <!--===================================================-->




<script>


    var status = 0;//开始为做准备录制状态
    var handle = false;
    var  isAppendIndex = -1;

<!-- 开始录音 -->
    function btnStart() {

        if (status == 0) {
            $("#btnRecord").text("准备录制...")
            $.ajax({
                url: "/start"

            }).done(function (rs) {
                status = 1;
                console.log(rs);//
                $("#btnRecord").text("停止录制")

                handle = setInterval(function () {
                    readInfo();
                    btnSave();
                }, 1000);

            });


        } else {
            //停止

            $("#btnRecord").text("准备停止...")
            $.ajax({
                url: "/endrecord"

            }).done(function (rs) {
                status = 1;
                console.log(rs);//
                $("#btnRecord").text("开始录制")
                clearInterval(handle);
            });

        }


    }
<!-- 读取转写结果 -->
    function readInfo() {

        $.ajax({
            url: "/readinfo"
        }).done(function (result) {
            // if(result == null || result=="")
            //     return ;
            // var rs = eval(result)
            var rs =result;


            //判断是否是最终结果?

            if (rs.type == 0) {

                lastStr = rs.content

                if (isAppendIndex < rs.index){
                   allInfo(lastStr);
                   isAppendIndex = rs.index;
                }



            } else {

            }

             $("#myText").val(rs.content)
        })
    }

<!-- 显示全部的转写结果 -->
    function allInfo(appendStr) {
        var oldStr = $("#myTexts").val();
        oldStr += "\n" + appendStr

        $("#myTexts").val(oldStr)

    }
<!-- 保存转写文档按钮
    function btnSave() {
        var txt= $("#myTexts").val();
        $.ajax({
            url: "/savetxt"
            ,data:{msg:txt}
        }).done(function (rs) {

            $("#btnSave").val(rs)
        })
    }
-->
     function btnSave() {
        var txt= $("#myTexts").val();
        $.ajax({
            url: "/addinfo"
        }).done(function (rs) {

            $("#btnSave").val(rs)
        })
    }
<!-- 转写文档下载 /download/{file_name}-->

    function files_download() {
        var a = document.createElement('a');
        var url = '/download/{file_name}'
        var filename = 'meeting_filename.docx';
        a.href=url;
        a.download = filename;
        a.click()
 }
    ///////////////////////////////

     var autoSaveHandle = null;
        var isAutoSave = false;

        function record() {

            //一旦记录开始，则每1秒写一次缓存
            autoSaveHandle = setInterval(save2local, 1000);
            isAutoSave = true;//开始自动记录

        }

        function save2local() {
            var txtStr = $("#txtAll").val();
            window.localStorage.setItem('txtStr', txtStr)
            console.log("完成自动记录....")
        }

        function readlocal() {
            //判断textarea中是否有数据
            var oldStr = $("#txtAll").val();

            var needLoad = false;
            if (oldStr != null && oldStr != "") {
                if (confirm("文本框已经有了数据，是否要替换它？")){
                    needLoad = true
                }
            }

            //如果有，是否要覆盖？
            if (needLoad) {
                //暂停自动记录
                if (autoSaveHandle) clearInterval(autoSaveHandle);
                var txtStr = window.localStorage.setItem('txtStr')
                $("#txtAll").val(txtStr);

                //继续自动记录
                if (isAutoSave) {
                    autoSaveHandle = setInterval(save2local, 1000);
                }
            }

        }

        $(document).on('nifty.ready', function () {







        });



</script>



</body>
</html>